<template>
  <drag-modal
    :visible="templateVisible"
    :confirm-loading="confirmLoading"
    @cancel="handleCancel"
  >
    <div style="padding: 20px">
      <a-form-model
        v-if="templateVisible"
        ref="ruleForm"
        :form="form"
      >
        <a-row>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="WBS模板"
              :label-col="{lg: {span: 8}, sm: {span:8}}"
              :wrapper-col="{lg: {span: 16}, sm: {span: 16} }"
            >
              <a-select
                v-decorator="['template', { rules: [{ required: false, message: '请选择标准WBS模板' }] }]"
                show-search
                :filter-option="templateFilterOption"
                placeholder="选择标准WBS模板"
                @change="onTemplateChange"
              >
                <a-spin
                  v-if="loading"
                  slot="notFoundContent"
                  size="small"
                />
                <a-select-option
                  v-for="t in templates"
                  :key="t.wbsTemplateId"
                  style="width:200px"
                  :value="t.wbsTemplateId"
                >
                  {{ t.formatName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="开工日期"
              :label-col="{lg: {span: 8}, sm: {span:8}}"
              :wrapper-col="{lg: {span: 16}, sm: {span: 16} }"
            >
              <a-date-picker
                v-decorator="['startDate', { rules: [{ required: false, message: '请选择项目开工日期' }] }]"
                placeholder="选择项目开工日期"
                @change="onStartDateChange"
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-button
              type="primary"
              style="margin-left:20px"
              :loading="loading"
              @click="selectTemplateModel"
            >
              确定
            </a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <a-table
      v-if="tableData && tableData.length"
      row-key="id"
      :columns="columns"
      :default-expand-all-rows="true"
      :pagination="false"
      :scroll="{ y: 600 , x:1200}"
      :expand-icon-column-index="2"
      :data-source="tableData"
      :row-selection="rowSelection"
    >
      <span
        slot="serial"
        slot-scope="text, record, index"
      >{{ index + 1 }}</span>
      <template
        slot="startDate"
        slot-scope="text, record"
      >
        <span v-if="record.startDate">{{ record.startDate.substr(0,10) }}</span>
      </template>
      <template
        slot="endDate"
        slot-scope="text, record"
      >
        <span v-if="record.endDate">{{ record.endDate.substr(0,10) }}</span>
      </template>
      <template
        slot="name"
        slot-scope="text, record"
      >
        <span
          v-if="record.level!='3'"
          :title="record.name"
        >{{ record.name }}</span>
      </template>
    </a-table>
    <template slot="footer">
      <a-button
        style="margin-left:20px"
        @click="handleCancel"
      >
        取消
      </a-button>
      <a-button
        type="primary"
        :loading="confirmLoading"
        style="margin-left:20px"
        @click="handleSubmit"
      >
        确定
      </a-button>
    </template>
  </drag-modal>

  <!--<a-modal-->
  <!--title="从标准WBS模板导入"-->
  <!--:visible="templateVisible"-->
  <!--:class="simpleClass"-->
  <!--ok-text="确定导入"-->
  <!--width="90%"-->
  <!--maxHeight="600px"-->
  <!--:maskClosable="false"-->
  <!--:destroyOnClose="true"-->
  <!--:confirm-loading="confirmLoading"-->
  <!--cancel-text="取 消"-->
  <!--@ok="handleSubmit"-->
  <!--@cancel="handleCancel"-->
  <!--&gt;-->

  <!--</a-modal>-->
</template>

<script>
import { getWbsTemplate, getWbsTemplateList } from '@/api/template'
import { getTemplateList } from '@/api/construction/planInput'
import DragModal from '@/components/DragModal'

export default {
  name: 'TaskTemplateModal',
  props: {
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    selectLevel: {
      type: [String, Number]
    }
  },
  watch: {
    visible: {
      handler(nv) {
        this.templateVisible = nv
        if (nv) {
          this.columns = this.getColumns()
          this.confirmLoading = false
          this.getWbsTemplateList()
        }
      },
      immediate: true
    },
    selectLevel: {
      handler(value) {
        console.log(value)
      },
      immediate: true
    }
  },
  components: {
    DragModal
  },

  data() {
    return {
      templates: [],
      selectTemplateLevel: '',
      plugins: {
        multiselect: true,
        drag_timeline: true
      },
      confirmLoading: false,
      loading: false,
      templateVisible: false,
      rowIndex: 1,
      tableData: [],
      columns: [],
      data: [],
      selectedData: [],
      rowSelection: {},
      form: this.$form.createForm(this, {}),
      selectedTemplate: null,
      selectedStartDate: null,
      selectedKeys: []
    }
  },
  created() {
    this.rowSelection = this.getRowSelection()
  },
  methods: {
    getWbsTemplateList() {
      this.loading = true
      getWbsTemplateList({ statusCode: '1', pageSize: 2000 }).then((res) => {
        this.templates = res.data
        this.loading = false
      })
    },
    selectTemplateModel() {
      console.log(this.selectedTemplate)
      console.log(this.selectedStartDate)
      if (!this.selectedTemplate) {
        this.$message.error('请选择wbs模板')
        return false
      } else if (!this.selectedStartDate) {
        this.$message.error('请选择开工日期')
        return false
      } else {
        this.loading = true
        getTemplateList({
          templateId: this.selectedTemplate,
          startDate: this.selectedStartDate
        })
          .then((res) => {
            res.data.children.forEach((data) => {
              this.loading = false
              console.log(data)
              if (data.period) {
                data.duration = data.period
              }
              if (data.children) {
                data.children.forEach((work) => {
                  if (work.period) {
                    work.duration = work.period
                  }
                  if (work.works) {
                    work.children = work.works
                    work.children.forEach((item) => {
                      item.businessMatters = item.name
                      if (item.nodeControl) {
                        item.nodeControlName = item.nodeControl.name
                      }
                    })
                  }
                })
              }
            })
            this.tableData = res.data.children
            console.log(this.tableData)
          })
          .catch(() => {
            this.loading = false
          })
      }
    },
    getRowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.columns = this.getColumns()
          this.selectedData = selectedRows
        },
        onSelect: (record, selected, selectedRows) => {
          this.columns = this.getColumns()
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          this.columns = this.getColumns()
          this.selectedData = selectedRows
        }
      }
    },
    clickTemplate() {
      this.getWbsTemplateList()
    },
    getColumns() {
      let rowIndex = 1
      return [
        {
          title: '序号',
          width: 65,
          align: 'center',
          dataIndex: 'sortNum'
        },
        {
          title: '阶段/类别',
          dataIndex: 'name',
          // width: 300,
          scopedSlots: { customRender: 'name' },
          ellipsis: true
        },
        {
          title: '业务事项',
          dataIndex: 'businessMatters',
          ellipsis: true
          // width: 300,
        },
        {
          title: '管控级别',
          dataIndex: 'nodeControlName'
          // width: 100
        },
        {
          title: '周期',
          dataIndex: 'duration',
          width: 60
        },
        {
          title: '计划开始日期',
          dataIndex: 'startDate',
          width: 120,
          scopedSlots: { customRender: 'startDate' }
        },
        {
          title: '计划完成日期',
          dataIndex: 'endDate',
          width: 120,
          scopedSlots: { customRender: 'endDate' }
        },
        {
          title: '完成标准',
          dataIndex: 'completeStandard',
          // width: 300,
          ellipsis: true
        },
        {
          title: '验证资料',
          dataIndex: 'verifyFiles',
          // width: 300,
          ellipsis: true
        },
        {
          title: '第一责任人',
          dataIndex: 'firstResName',
          ellipsis: true
        }
        // {
        //   title: '直接责任人',
        //   dataIndex: 'responsible',
        //   ellipsis: true
        // },
      ]
    },
    templateFilterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    onTemplateChange(template) {
      console.log(template)
      this.selectedTemplate = template
      this.columns = this.getColumns()
    },
    onStartDateChange(value, dateString) {
      console.log(dateString)
      this.selectedStartDate = dateString
      this.columns = this.getColumns()
    },
    handleCancel() {
      this.confirmLoading = false
      this.templateVisible = false
      this.$emit('hide', false)
      this.tableData = []
      this.selectedTemplate = null
      this.selectedStartDate = null
    },
    handleSubmit() {
      console.log(this.selectedData)
      if (!this.selectedTemplate) {
        this.$message.warn('请选择标准WBS模板')
        return
      }
      if (!this.selectedStartDate) {
        this.$message.warn('请选择项目开工日期')
        return
      }
      if (!this.selectedData || this.selectedData.length <= 0) {
        this.$message.warn('请选择需要导入的数据')
        return
      }
      if (this.confirmLoading) return
      this.confirmLoading = true
      this.columns = this.getColumns()
      this.$emit('hide', false)
      this.$emit('dataImport', this.selectedData, this.selectedTemplate, this.selectedStartDate)
      this.tableData = []
    }
  }
}
</script>

<style scoped>
/deep/ .ant-modal-body {
  padding: 0;
}

/* /deep/ .ant-select-selection,.ant-input-number{
    height:100% !important;
    width:200px !important
  }
/deep/ .ant-select:not(.ant-pagination-options-size-changer) .ant-select-selection, .ant-input-number{
  height:100% !important;
  width:200px !important
} */
</style>